<template>
	<view>
	<navBar :isHome="true"></navBar>
	<!--提示-->
	<view style="margin-top: 10rpx;">
		<view class="weui-cell" style="background: #fff9eb;">
			<view class="weui-cell__hd">
				<image src="/static/resource/images/ic_myapp.png" style="display: block;width: 40rpx;height: 40rpx; margin: right 14rpx;"></image>
			</view>
			<view class="weui-cell__bd">
				<text style=" margin-left:10rpx;color:#be9719; font-size: 13px;">点击右上角"添加到我的小程序"，方便下次找到！</text>
			</view>
			<view class="weui-cell__ft">
				<image src="../../static/resource/images/modal_closer.png" style="display: block;width: 30rpx; height: 30rpx;"></image>
			</view>
		</view>
	</view>
	
	<!--轮播图-->
	<view v-if="slides && slides.length>0" class="index.swiper">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
					<block  v-for="(item,index) in slides" :key="index">
						<swiper-item>
						<image :src="item.pic_image_url" mode="widthFix" show-menu-by-longpress :data-index='index'></image>
						</swiper-item>
					</block>
			</swiper>
	</view>
	
	<!--快捷入口-->
	<view  v-if="nav2s && nav2s.length>0" class="nav2-list">
		<block v-for="(item,index) in nav2s" :key="index">
			<view class="nav2-item" :data-index="index" @click="onNav2Tap">
				<view class="nav2-pic">
					<image :src="item.pic_image_url" mode="widthFix" ></image>
				</view>
			</view>
		</block>
	</view>
	
	<!--金刚区快捷入口-->
	<view v-if="navs && navs.length>0" class="nav-list">
	   <block v-for= "(item,index) in navs" :key="index">
		   <view class="nav-item" @click="onNavTap" :data-index="index">
			   <view class="nav-pic"><image :src="item.pic_image_url" mode="widthFix"></image></view>
			   <view class="nav-text" :style="'color:' + (item.tcolor? item.tcolor:'')">
				   {{item.title}}
			   </view>
		   </view>
	   </block>
	</view>
	
	<!--医院列表-->
	<view class="weui-cells  hosp-list">
		<view class="weui-cell hosp-item weui-cell_access"  v-for="(item,index) in hosipitals" :key="item.id" :data-hid="item.id"  @click="toHosipital" >
			<view class="weui-cell__hd"><image class="hosp-avatar" mode="aspectFill" :src="item.avatar ? item.avatar_url : '../../static/resource/images/avatar.jpg'"></image></view>
			<view class="weui-cell__bd">
				<view>
					<text class="hosp-home">{{item.name}}</text>
				</view>
				<view class="hosp-line">
					<text class="hosp-rank">{{item.rank}}</text>
					<text class="hosp-label">{{item.label}}</text>
				</view>
				<view class="hosp-line">
					<text class="hosp-intro">{{item.intro}}</text>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script setup>
	import {ref,toRaw } from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
     
	const app = getApp(); 
	//定义轮播图数据
	const slides = ref([])
	//轮播属性
	const indicatorDots = ref(true)
	const  autoplay = ref(true)
	const  interval = ref(4000)
	const  duration = ref(500)
	
	//快捷入口2个
	const nav2s  = ref([])
	//快捷入口多个
	const navs = ref([])
	//医院列表
	const hosipitals = ref([])
	
    onLoad(() => {
		// getApp().globalData.utils.getUserInfo()
		console.log("返回",getApp().globalData.utils.getUserInfo())
		console.log("输出test的值",getApp().globalData.test)
		app.globalData.utils.getUserInfo()
		
		//获取轮播数据源
		app.globalData.utils.request({
			url:'/app/init',
			success: res => {
				console.log(res)
				const {id} = res.data.area
				app.globalData.utils.request({
					url:"/Index/index",
					data:{
						aid: id
					},
					//{data} 解构出来 相当于const data =  res.data 
					success: ({data}) => {
						console.log(data,"轮播数据")
						slides.value = data.slides
						console.log(data.nav2s,"快捷访问")
						nav2s.value = data.nav2s
						navs.value = data.navs
						hosipitals.value = data.hospitals
					}
				})
				
			}
		})
		
	})
	
	const onNav2Tap = (e) => {
		//e 是点击的事件对象
		console.log(e);
		//转换成非响应数据（即普通数据 用toRaw方法  如  toRaw(nav2s.value)
		//e.currentTarget.dataset.index 是当前点击目标对象的索引 即data-index的值
		const nav = toRaw(nav2s.value)[e.currentTarget.dataset.index]
		jump(nav,"nav2")
		
	}
	
	
	const onNavTap = (e) => {
		const nav = toRaw(navs.value)[e.currentTarget.dataset.index]
		jump(nav,"nav")
	}
	
	
	//封装思想： 提取公共部分
	const jump = (nav,type) => {
		//判断是否为内部链接
		if(nav.stype == 1){
			uni.navigateTo({
				url: nav.stype_link
			})
		}
	}
	
	//点击医院列表 跳转到医院列表详情
	const toHosipital = (e) => {
		uni.navigateTo({
			url: '/pages/hospital/index?hid='+ e.currentTarget.dataset.hid,
		})
	}
 
</script>

<style>
page{
	background-color: #fff;
}

.index.swiper{
	padding: 20rpx 20rpx 0 20rpx;
	overflow: hidden;

}

.index.swiper swiper{
	height: 320rpx;
	overflow: hidden;
	border-radius: 10rpx;
}

.index.swiper swiper-item image {
	width: 100%;
	height: 100%;
}


.nav2-list {
    margin: 10rpx 20rpx 0 20rpx;
}
.nav2-list::after {
    content: '';
    display: block;
    height: 0;
    line-height: 0;
	/* 使该元素清除左右浮动。这通常用于在包含浮动子元素的容器后，确保容器自身可以正确扩展其高度。 */
    clear: both;
    visibility: hidden;
}
.nav2-item {
    float: left;
    margin-top: 20rpx;
    width: 50%;
    text-align: center;
    box-sizing: border-box;
    padding: 0 5rpx;
}
.nav2-pic {
    width: 100%;
}
.nav2-pic image {
    display: block;
    width: 100%;
}


.nav-list::after {
    content: '';
    display: block;
    height: 0;
    line-height: 0;
    clear: both;
    visibility: hidden;
}
.nav-item {
    float: left;
    margin-top: 20rpx;
    width: 20%;
    text-align: center;
    padding: 10rpx 0;
}
.nav-pic image {
    display: block;
    margin: 0 auto;
    width: 110rpx;
    height: 110rpx;
}
.nav-text {
    font-size: 24rpx;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
}


.hosp-list {
    margin: 10rpx 0 0 0;
    background: none;
}
.hosp-list::before {
    display: none;
}
.hosp-list::after {
    display: none;
}

.hosp-item {
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
    padding: 20rpx;
    margin: 20rpx;
    border-radius: 10rpx;
    overflow: hidden;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04), 0 1px 6px 0 rgba(0, 0, 0, 0.04);
}
.hosp-item::before {
    display: none;
}
.hosp-item::after {
    display: none;
}
.hosp-name {
    font-weight: bold;
    font-size: 34rpx;
}
.hosp-avatar {
    display: block;
    width: 200rpx;
    height: 180rpx;
    border-radius: 10rpx;
    overflow: hidden;
    margin-right: 20rpx;
}
.hosp-line {
    margin-top: 5rpx;
}
.hosp-line text {
    font-size: 26rpx;
}
.hosp-rank {
    font-weight: bold;
    color: #0bb585;
    margin-right: 15rpx;
}
.hosp-label {
    font-weight: bold;
    color: #0ca7ae;
    margin-right: 15rpx;
}
.hosp-intro {
    color: #999999;
}

</style>
